/**
 * 弹幕渲染器
 * 使用DanmakuFilter处理后的文本进行渲染
 */
class DanmakuRenderer {
    constructor(containerId, options = {}) {
        this.container = document.getElementById(containerId);
        if (!this.container) {
            throw new Error(`找不到容器元素: ${containerId}`);
        }
        
        // 弹幕过滤器
        this.filter = new DanmakuFilter(options.filterOptions);
        
        // 默认配置
        this.config = {
            speed: 5,  // 弹幕速度
            fontSize: 16,  // 字体大小
            colors: ['#FFFFFF', '#FF0000', '#00FF00', '#0000FF', '#FFFF00', '#FF00FF', '#00FFFF'],  // 可用颜色
            maxLines: 15,  // 最大显示行数
            opacity: 0.9,  // 不透明度
            showAvatar: true,  // 是否显示头像
            avatarSize: 24,  // 头像大小
            ...options
        };
        
        // 初始化
        this.init();
    }
    
    /**
     * 初始化弹幕容器
     */
    init() {
        this.container.classList.add('danmaku-container');
        this.container.style.position = 'relative';
        this.container.style.overflow = 'hidden';
        this.container.style.height = '100%';
        
        // 创建弹幕层
        this.danmakuLayer = document.createElement('div');
        this.danmakuLayer.classList.add('danmaku-layer');
        this.danmakuLayer.style.position = 'absolute';
        this.danmakuLayer.style.top = '0';
        this.danmakuLayer.style.left = '0';
        this.danmakuLayer.style.width = '100%';
        this.danmakuLayer.style.height = '100%';
        this.danmakuLayer.style.pointerEvents = 'none';
        
        this.container.appendChild(this.danmakuLayer);
        
        // 计算每行高度
        this.lineHeight = this.config.fontSize + 8;
        
        // 跟踪已使用的行
        this.usedLines = new Array(this.config.maxLines).fill(false);
    }
    
    /**
     * 添加弹幕
     * @param {object} danmaku 弹幕对象 { text, color, avatarUrl, userId, userName }
     */
    addDanmaku(danmaku) {
        if (!danmaku || !danmaku.text) {
            return;
        }
        
        // 处理弹幕文本
        const processedText = this.filter.process(danmaku.text);
        
        // 创建弹幕元素
        const danmakuElement = document.createElement('div');
        danmakuElement.classList.add('danmaku-item');
        danmakuElement.style.position = 'absolute';
        danmakuElement.style.whiteSpace = 'nowrap';
        danmakuElement.style.fontSize = `${this.config.fontSize}px`;
        danmakuElement.style.opacity = this.config.opacity;
        danmakuElement.style.transition = 'transform linear';
        danmakuElement.style.zIndex = '10';
        
        // 设置颜色
        const color = danmaku.color || this.config.colors[Math.floor(Math.random() * this.config.colors.length)];
        danmakuElement.style.color = color;
        
        // 设置头像和用户名
        if (this.config.showAvatar && danmaku.avatarUrl) {
            const avatarContainer = document.createElement('div');
            avatarContainer.style.display = 'inline-flex';
            avatarContainer.style.alignItems = 'center';
            avatarContainer.style.marginRight = '8px';
            
            const avatarImg = document.createElement('img');
            avatarImg.src = danmaku.avatarUrl;
            avatarImg.alt = danmaku.userName || '用户头像';
            avatarImg.style.width = `${this.config.avatarSize}px`;
            avatarImg.style.height = `${this.config.avatarSize}px`;
            avatarImg.style.borderRadius = '50%';
            avatarImg.style.objectFit = 'cover';
            
            const userNameSpan = document.createElement('span');
            userNameSpan.textContent = (danmaku.userName || '用户') + ': ';
            userNameSpan.style.fontWeight = 'bold';
            userNameSpan.style.marginRight = '4px';
            
            avatarContainer.appendChild(avatarImg);
            avatarContainer.appendChild(userNameSpan);
            danmakuElement.appendChild(avatarContainer);
        } else if (danmaku.userName) {
            const userNameSpan = document.createElement('span');
            userNameSpan.textContent = danmaku.userName + ': ';
            userNameSpan.style.fontWeight = 'bold';
            userNameSpan.style.marginRight = '4px';
            danmakuElement.appendChild(userNameSpan);
        }
        
        // 设置弹幕内容
        danmakuElement.insertAdjacentHTML('beforeend', processedText);
        
        // 获取可用行
        const lineIndex = this.getAvailableLine();
        if (lineIndex === -1) {
            // 没有可用行，随机选择一行
            const randomLine = Math.floor(Math.random() * this.config.maxLines);
            this.removeDanmakuByLine(randomLine);
            this.addDanmakuToLine(danmakuElement, randomLine);
        } else {
            this.addDanmakuToLine(danmakuElement, lineIndex);
        }
        
        // 添加到容器
        this.danmakuLayer.appendChild(danmakuElement);
        
        // 计算动画时间
        const containerWidth = this.container.offsetWidth;
        const danmakuWidth = danmakuElement.offsetWidth;
        const duration = (containerWidth + danmakuWidth) / this.config.speed;
        
        // 设置动画
        danmakuElement.style.transform = `translateX(${containerWidth}px)`;
        danmakuElement.style.transitionDuration = `${duration}s`;
        
        // 开始动画
        requestAnimationFrame(() => {
            danmakuElement.style.transform = `translateX(-${danmakuWidth}px)`;
        });
        
        // 动画结束后移除
        setTimeout(() => {
            if (danmakuElement.parentNode === this.danmakuLayer) {
                this.danmakuLayer.removeChild(danmakuElement);
                this.usedLines[lineIndex] = false;
            }
        }, duration * 1000);
    }
    
    /**
     * 获取可用行
     * @returns {number} 可用行索引，-1表示没有可用行
     */
    getAvailableLine() {
        for (let i = 0; i < this.config.maxLines; i++) {
            if (!this.usedLines[i]) {
                this.usedLines[i] = true;
                return i;
            }
        }
        return -1;
    }
    
    /**
     * 将弹幕添加到指定行
     * @param {HTMLElement} danmakuElement 弹幕元素
     * @param {number} lineIndex 行索引
     */
    addDanmakuToLine(danmakuElement, lineIndex) {
        danmakuElement.style.top = `${lineIndex * this.lineHeight}px`;
    }
    
    /**
     * 移除指定行的弹幕
     * @param {number} lineIndex 行索引
     */
    removeDanmakuByLine(lineIndex) {
        const danmakus = this.danmakuLayer.querySelectorAll('.danmaku-item');
        const lineTop = lineIndex * this.lineHeight;
        
        danmakus.forEach(danmaku => {
            if (parseInt(danmaku.style.top) === lineTop) {
                this.danmakuLayer.removeChild(danmaku);
            }
        });
        
        this.usedLines[lineIndex] = false;
    }
    
    /**
     * 清空所有弹幕
     */
    clear() {
        this.danmakuLayer.innerHTML = '';
        this.usedLines = new Array(this.config.maxLines).fill(false);
    }
    
    /**
     * 设置弹幕过滤器配置
     * @param {object} options 配置选项
     */
    setFilterConfig(options) {
        this.filter.setConfig(options);
    }
}

// 示例使用
function initDanmakuRenderer(containerId, options) {
    return new DanmakuRenderer(containerId, options);
}    